<template>
  <div class="content_box">
    <div class="next_item" v-for="(item, index) in myworks" :key="index" @mouseenter="onmcouseenter(item)"
      @mouseleave="onmouseleave(item)">
      <!-- {{ item.content }} :style="{top:item.y +'px' ,left:item.x+'px'}" -->
      <viewer>
        <img :src="item.Base64" />
      </viewer>
      <div class="next_box" v-show="item.showBtn">
        <el-button type="danger" @click="CanvasDelete(item.id)" :icon="Delete" circle />
        <el-button type="success" :icon="Position" @click="PositionData(item)"></el-button>
        <div :style="{ backgroundColor: isHovering ? 'pink' : '' }" @mouseenter="isHovering = true"
          @mouseleave="isHovering = false" class="edits" id="eit"><svg t="1715668731745" @click="DSHwork(item)"
            class="im" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11397" width="200"
            height="200">
            <path
              d="M749.3632 948.8896H210.688c-73.5232 0-133.12-59.5968-133.12-133.12V276.3776c0-73.5232 59.5968-133.12 133.12-133.12h538.6752c73.5232 0 133.12 59.5968 133.12 133.12v539.3408c0 73.5744-59.5968 133.1712-133.12 133.1712z"
              fill="#F85F69" p-id="11398"></path>
            <path
              d="M566.8352 593.6128l-123.136 44.032c-31.8976 11.4176-52.3264-9.8304-40.5504-42.0864l43.52-119.6544c3.584-9.8816 9.9328-19.712 18.1248-28.1088l336.6912-353.6384c21.9136-22.528 46.1824-24.32 60.5696-10.3424l78.6944 76.544c14.3872 13.9776 13.3632 38.4512-8.5504 60.9792l-335.7696 352.7168c-8.8064 8.9088-19.2 15.8208-29.5936 19.5584z"
              fill="#F85F69" p-id="11399"></path>
            <path
              d="M755.0976 143.36L464.7424 447.744c-8.192 8.3968-14.4896 18.2272-18.1248 28.1088l-43.52 119.6544c-11.7248 32.3072 8.704 53.504 40.5504 42.0864l123.136-44.032c10.4448-3.7376 20.8384-10.5984 29.5936-19.6096l285.952-299.8784c-0.2048-70.912-56.7296-128.6144-127.232-130.7136z"
              fill="#F33B3D" p-id="11400"></path>
            <path
              d="M640.5632 790.7328H319.488c-19.8144 0-35.84-16.0256-35.84-35.84s16.0256-35.84 35.84-35.84h321.0752c19.8144 0 35.84 16.0256 35.84 35.84s-16.0256 35.84-35.84 35.84z"
              fill="#FFFFFF" p-id="11401"></path>
          </svg></div>
        <div class="xiezuo" @click="ADDOPEN(item.id)"><img src="../../assets/images/协作.png" class="getassist" alt=""
            srcset=""></div>
      </div>
    </div>


    <!-- //我的协作团狂 -->



    <div class="assist">

      <el-dialog v-model="dialogTableVisible" title="添加协作人" width="800">

        <div v-for="(item, index) in partner" :key="index">
          <el-input v-model="item.name" style="width: 240px" placeholder="输入协作人账号" />
          <el-button class="btn" type="success" @click="add" :icon="Plus" circle />
          <el-button class="btn" type="success" v-if="index != 0" @click="reduce(item.id)" :icon="Minus" circle />
        </div>
        <el-button type="primary" @click="confirmAdd">添加</el-button>
      </el-dialog>
    </div>
    <div class="times">
      <!-- <p>倒计时: {{ countdownTime }}</p> -->
      <!-- 当倒计时结束时显示此消息 -->
      <p v-if="countdownFinished">倒计时结束！</p>
    </div>

      <div v-if="countdownVisible">
      Countdown: {{ countdown }}
    </div>
    <div v-else>
      <!-- Element hidden after countdown -->
    </div>
  </div>
</template>
<script setup lang="ts">
import { getpushWorks, DelPushWorks, addPartners, getApiData } from '@/api/canvas'
import { ElMessage, inputNumberEmits } from 'element-plus'
import { ref, reactive, onMounted, computed, toRaw, onUnmounted } from 'vue';
import { Delete, Plus, Minus, Position } from '@element-plus/icons-vue';
//使用hooks 
import { useRouter } from 'vue-router'
import { useHover } from '@/hooks/UserMove.ts'
import { useComponents } from '@/stores/counter'
import { useCountdown } from '@/hooks/Timehooks'
// 使用 useCountdown 并传入 handleDelete 作为 onFinish 回调  
// const { countdownTime, countdownFinished, start, stop } = useCountdown(2)
const { PullEditWorks, SetLocalStorage } = useComponents()

// 响应式引用，用于跟踪鼠标是否悬停在元素上  
const dialogFormVisible = ref(false)
const isHovering = ref(false);
const myworks = ref<Array<any>>([]);
const dialogTableVisible = ref(false)
const workId = ref(0)//定义协作作品id
const router = useRouter()
//默认隐藏
const showBtn = false;
//插入接口 进行使用
getpushWorks(sessionStorage.getItem('userId') as string).then((res) => {
  console.log(res, "6666666666666699999999999");
  myworks.value.push(...res.data.data)
  console.log(myworks, "思路决定一切，切勿盲目跟风");

})
//滑入显示
const onmcouseenter = (item: any) => {
  item.showBtn = true;
}
//离开隐藏
const onmouseleave = (item: any) => {
  item.showBtn = false;
}
//删除作品
const CanvasDelete = async (id: string) => {

  if (confirm('确定删除我的作品吗？')) {

    let Deleteindex = myworks.value.findIndex((item) => item.id == id)
    myworks.value.splice(Deleteindex, 1)

    let { data: { code, msg } } = await DelPushWorks(id)
    if (code === 0) {
      ElMessage({
        message: msg,
        type: 'success',
        duration: 1500,
        onClose() {
          router.push('/home/hui')
        },
      })
    }
  }

}

const ADDOPEN = (id: number) => {
  //开启弹框
  dialogTableVisible.value = true
  //作品id赋值
  workId.value = id
}
//添加协助人输入框数组
const partner: any = reactive([
  {
    id: +new Date,
    name: ""

  }
]
)
console.log(partner, "77777777777777777777324242");

const add = () => {
  partner.push({
    id: +new Date,
    name: ""
  })

  //添加协作人
}
const reduce = (id: string) => {
  //删除协作人  //遍历数组 找不到返回-1
  alert(14)
  console.log(id);
  let DELETEINDEX = partner.value.findIndex((item: any) => item.id === id);
  partner.value.splice(DELETEINDEX, 1)
}
const confirmAdd = async () => {
  // 收集所有协作人 ==> 获取partner数组中所有的name
  // let names = partner.map((item: any) => item.name)
  let { data: { code, msg } } = await addPartners({
    workId: workId.value,
    usernameArr: partner.map((item: any) => item.name)
  })
  // console.log(msg);
  if (code === 0) {
    ElMessage({
      type: 'success',
      message: msg,
      onClose() {
        // 对话框隐藏
        dialogTableVisible.value = false
      }
    })
  }
}

//编辑
let DSHwork = async (item: any) => {
  console.log(item, "666666");

  PullEditWorks(item.workData)
  router.push('/myb')

}
const PositionData = (item: any) => {

  SetLocalStorage(toRaw(item).workData)
  //判断
  localStorage.setItem('setcanvasComponents', JSON.stringify(item.workData))
  router.push({
    path: '/pizhu',
    query: {
      item: item.id,

    },

  })

}
</script>
<style lang='scss' scoped>
.content_box {
  width: 150%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  overflow: auto; //开启移动
}

.next_item {
  width: 200px;
  height: 300px;
  border: 2px solid rgb(238, 0, 171);
  position: relative;
  margin: 20px 10px;
}

.next_item img {
  width: 200px;
  height: 300px;
}

.next_box {
  width: 100%;
  height: 60px;
  position: absolute;
  bottom: 0px;
  background: rgba(0, 0, 0, .3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.xiezuo {
  display: flex;

  img {
    width: 30px;
    height: 30px;
    font-size: 20px;
  }
}

.edits {
  display: flex;

  .im {
    width: 30px;
    height: 30px;
  }
}


.hoverable {
  /* 默认样式 */
  background-color: #f0f0f0;
  color: #333;
  padding: 10px;
  transition: background-color 0.3s;
}
</style>